<template>
  <div id="userRegisterPage">
    <div class="register-container">
      <div class="register-card">
        <div class="register-header">
          <div class="logo-container">
            <img src="@/assets/LOGO.png" alt="Logo" class="register-logo" />
          </div>
          <h2 class="register-title">创建账户</h2>
          <p class="register-subtitle">加入明凡云，开启您的云端之旅</p>
        </div>

        <a-form
          class="register-form"
          :model="formState"
          name="basic"
          layout="vertical"
          autocomplete="off"
          @finish="handleSubmit"
          size="large"
        >
          <a-form-item
            name="userAccount"
            :rules="[{ required: true, message: '请输入账号' }]"
          >
            <a-input
              v-model:value="formState.userAccount"
              placeholder="请输入账号"
            >
              <template #prefix>
                <UserOutlined />
              </template>
            </a-input>
          </a-form-item>

          <a-form-item
            name="userPassword"
            :rules="[
              { required: true, message: '请输入密码' },
              { min: 8, message: '密码不能小于 8 位' },
            ]"
          >
            <a-input-password
              v-model:value="formState.userPassword"
              placeholder="请输入密码"
            >
              <template #prefix>
                <LockOutlined />
              </template>
            </a-input-password>
          </a-form-item>

          <a-form-item
            name="checkPassword"
            :rules="[
              { required: true, message: '请输入确认密码' },
              { min: 8, message: '确认密码不能小于 8 位' },
            ]"
          >
            <a-input-password
              v-model:value="formState.checkPassword"
              placeholder="请再次输入密码"
            >
              <template #prefix>
                <SafetyOutlined />
              </template>
            </a-input-password>
          </a-form-item>

          <a-form-item
            name="planetCode"
            :rules="[{ required: true, message: '请输入编号' }]"
          >
            <a-input
              v-model:value="formState.planetCode"
              placeholder="请输入编号"
            >
              <template #prefix>
                <NumberOutlined />
              </template>
            </a-input>
          </a-form-item>

          <a-form-item>
            <a-button
              type="primary"
              html-type="submit"
              class="register-button"
              :loading="loading"
              block
            >
              创建账户
            </a-button>
          </a-form-item>
        </a-form>

        <div class="register-footer">
          <span>已有账户？</span>
          <a-button type="link" @click="goToLogin" class="login-link">
            立即登录
          </a-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref } from "vue";
import {
  UserOutlined,
  LockOutlined,
  SafetyOutlined,
  NumberOutlined,
} from "@ant-design/icons-vue";
import { userRegister } from "@/api/user";
import { message } from "ant-design-vue";
import { useRouter } from "vue-router";

interface FormState {
  userAccount: string;
  userPassword: string;
  checkPassword: string;
  planetCode: string;
}

const formState = reactive<FormState>({
  userAccount: "",
  userPassword: "",
  checkPassword: "",
  planetCode: "",
});

const router = useRouter();
const loading = ref(false);

/**
 * 提交表单
 * @param values
 */
const handleSubmit = async (values: any) => {
  // 判断两次输入的密码是否一致
  if (formState.userPassword !== formState.checkPassword) {
    message.error("二次输入的密码不一致");
    return;
  }

  loading.value = true;
  try {
    const res = await userRegister(values);
    // 注册成功，跳转到登录页面
    if (res.data.code === 0 && res.data.data) {
      message.success("注册成功");
      router.push({
        path: "/user/login",
        replace: true,
      });
    } else {
      message.error("注册失败，" + res.data.description);
    }
  } finally {
    loading.value = false;
  }
};

const goToLogin = () => {
  router.push("/user/login");
};
</script>

<style scoped>
#userRegisterPage {
  min-height: calc(100vh - 200px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  padding: 20px;
}

.register-container {
  width: 100%;
  max-width: 480px;
}

.register-card {
  background: white;
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  padding: 40px 32px;
  backdrop-filter: blur(10px);
  animation: fadeInUp 0.6s ease-out;
}

.register-header {
  text-align: center;
  margin-bottom: 32px;
}

.logo-container {
  margin-bottom: 16px;
}

.register-logo {
  height: 48px;
  width: auto;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.register-title {
  font-size: 28px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 8px;
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.register-subtitle {
  color: #666;
  font-size: 14px;
  margin: 0;
}

.register-form {
  margin-bottom: 24px;
}

.register-button {
  height: 44px;
  font-size: 16px;
  font-weight: 500;
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  border: none;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.register-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(240, 147, 251, 0.4);
}

.register-footer {
  text-align: center;
  color: #666;
  font-size: 14px;
}

.login-link {
  color: #f5576c;
  font-weight: 500;
  padding: 0;
  height: auto;
  transition: all 0.3s ease;
}

.login-link:hover {
  color: #f093fb;
  transform: translateX(2px);
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 768px) {
  #userRegisterPage {
    padding: 16px;
  }

  .register-card {
    padding: 32px 24px;
  }

  .register-title {
    font-size: 24px;
  }
}
</style>
